<template>
  <el-container>
    <el-main class="contract_main">
      <el-form>
        <FormTools 
        :cols="t" 
        :firstI="i" 
        v-for="(t,i) in contractArr"  
        :key="i"
        @dragEnd="dragEnd"
        />
      </el-form>
    </el-main>
    <el-aside width="390px">
      <ComponentsDisplay />
    </el-aside>
  </el-container>
</template>

<script>
const ComponentsDisplay = () => import("./ComponentsDisplay.vue");
const FormTools =()=> import('@/components/FormTools.vue');
export default {
  name: "MainContract",
  components: {
    ComponentsDisplay,
    FormTools
  },
  props: {
    type: {
      type: String,
      default: "",
    },
    dragState: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      contractArr: [[{
        span:11
      },{
        span:11
      }]],
    };
  },
  methods: {
    dragEnd(firstI,i) {
      console.log('mouseUpEnd');
      if (!this.dragState) return;
      let {type}=this;
      console.log('dragEnd');
      this.$set(this.contractArr[firstI],i,{
        label: "字段名",
        placeholder: "字段填写说明",
        value: "",
        span:11,
        type
      });
      this.autoUpdate();
    },
    autoUpdate(){
      let newArr=this.contractArr.flat(1);
      if(!newArr.some(obj=>!obj.hasOwnProperty('value'))){
        this.contractArr.push([{
        span:11
      },{
        span:11
      }])
      }
    }
  },
};
</script>

<style lang="scss" scoped>
</style>